<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1, initial-scale=1.0">
    <title>中国非物质文化遗产网</title>
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <style>
        .back-top {
            width: 80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            position: fixed;
            bottom: 120px;
            right: 30px;
        }
    </style>
    <style>
        /* ::before伪元素,修改默认的分隔符 */
        .breadcrumb-item+.breadcrumb-item::before {
            content: "->";
        }
    </style>
</head>
<body id="grad">
    <div id="body">
        <div class="container" >
            <!--header：创建网页的页眉-->
            <header id="header">
                <div class="row">
                    <!-- 布局 -->
                    <div class=" container d-flex ">
                        <!-- 非物质文化遗产的logo（响应式） -->
                        <div class="col-2 embed-responsive ">
                            <img src="images/logo2.jpg"  alt="" class="rounded-circle img-fluid"
                                style="width: 160px; height: 160px;">
                        </div>
                        <div class="col-10 " style="height: 50px;">
                            <!-- 非物质文化遗产文字 -->
                            <h1 class="logo " id="fy-logo">非物质文化遗产</h1>
                            <div>
                                <!-- 功能栏：分类的导航链接（胶囊导航） -->
                                <ul class="nav nav-pills">
                                    <!-- 非物质文化遗产的全部和分类 -->
                                    <li class="nav-item"><a class="nav-link" href="second-page.html" style="color:white;font-family:'KaiTi'; font-size:20px;">查看全部</a></li>
                                    <li class="nav-item"><a class="nav-link" href="byys.html" style="color:white;font-family:'KaiTi';font-size:20px;">表演艺术</a></li>
                                    <li class="nav-item"><a class="nav-link" href="ctsgy.html" style="color:white;font-family:'KaiTi';font-size:20px ;">传统手工艺</a></li>
                                    <li class="nav-item"><a class="nav-link" href="ktct.html" style="color:white;font-family:'KaiTi';font-size:20px ;">口头传统</a></li>
                                    <li class="nav-item"><a class="nav-link" href="ysyjq.html" style="color:white;font-family:'KaiTi';font-size:20px ;">仪式与节庆</a></li>
                                    <li class="nav-item"><a class="nav-link" href="zrjyyzz.html" style="color:white;font-family:'KaiTi';font-size:20px ;">自然界与宇宙中</a></li>
                                </ul>
                                
                            </div>

                        </div>
                    </div>
                </div>
            </header>
            <p></p>
             <!-- breadcrumb创建面包屑导航 -->
        <nav>
            <ol class="breadcrumb" style="background-color:  white;">
                <!-- href指向面包屑链接 -->
                <li class="breadcrumb-item"style="font-family:'KaiTi';"> <a href="index.html" style="color:black">首页</a></li>
                <li class="breadcrumb-item"style="font-family:'KaiTi';"> <a href="second-page.html" style="color:black">查看全部</a></li>
            </ol>
        </nav>
            <p></p>
            <!--创建选项卡-->
            <div>
                <nav class="nav nav-tabs" id="my-nav">
                    <a href="#all" class="nav-item nav-link active"
                        style="color:black;text-indent:8px;font-family:'KaiTi';font-size:18px;" data-toggle="tab">全部</a>
                    <a href="#one" class="nav-item nav-link"
                        style="color:black;text-indent:8px;font-family:'KaiTi';font-size:18px;"
                        data-toggle="tab">2008</a>
                    <a href="#two" class="nav-item nav-link"
                        style="color:black;text-indent:8px;font-family:'KaiTi';font-size:18px;"
                        data-toggle="tab">2009</a>
                    <a href="#three" class="nav-item nav-link"
                        style="color:black;text-indent:8px;font-family:'KaiTi';font-size:18px;"
                        data-toggle="tab">2010</a>
                    <a href="#four" class="nav-item nav-link"
                        style="color:black;text-indent:8px;font-family:'KaiTi';font-size:18px;"
                        data-toggle="tab">2011</a>
                    <a href="#five" class="nav-item nav-link"
                        style="color:black;text-indent:8px;font-family:'KaiTi';font-size:18px;"
                        data-toggle="tab">2012</a>
                    <a href="#six" class="nav-item nav-link"
                        style="color:black;text-indent:8px;font-family:'KaiTi';font-size:18px;"
                        data-toggle="tab">2013</a>
                    <a href="#seven" class="nav-item nav-link"
                        style="color:black;text-indent:8px;font-family:'KaiTi';font-size:18px;"
                        data-toggle="tab">2016</a>
                    <a href="#eight" class="nav-item nav-link"
                        style="color:black;text-indent:8px;font-family:'KaiTi';font-size:18px;"
                        data-toggle="tab">2018</a>
                    <a href="#nine" class="nav-item nav-link"
                        style="color:black;text-indent:8px;font-family:'KaiTi';font-size:18px;"
                        data-toggle="tab">2020</a>
                </nav>
            </div>
            <p></p>
            <!-- content:填充各选项卡的内容-->
            <div class="tab-content">
                <!--填充 全部 里的内容-->
                <div class="tab-pane active" id="all">
                    <p></p>
                    <!--创建一个网格系统，将每个非遗项目整齐排列-->
                    <div class="row">
                        <div class="col-md-3">
                            <!--创建卡片，将非遗项目的图片和详情链接放在一起，分隔开每个非遗项目。-->
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/taijiquan.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">太极拳</h5>
                                    <a href="third-page\TaiChi.html" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/guqin2.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">古琴艺术</h5>
                                    <a href="third-page\guqin.html" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/mazu.jpg" class="card-img-top" alt="..." width="200px" height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">妈祖信俗</h5>
                                    <a href="third-page\mazu.html" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--创建第二行卡片-->
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/jianzhi.jpg" class="card-img-top" alt="..." width="200px" height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">剪纸</h5>
                                    <a href="third-page\jianzhi2.html" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/gesasier.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">格萨斯尔</h5>
                                    <a href="third-page\gesaersi.html" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/zangxi.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">藏戏</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--创建第三行卡片-->
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/changdiao.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">蒙古族长调民歌</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/nanyin.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">南音</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:210px">
                                <img src="images/guyue.jpg" class="card-img-top" alt="..." width="200px" height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">西安鼓乐</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第四行-->
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/yueju.jpg" class="card-img-top" alt="..." width="200px" height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">粤剧</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/nongyuewu.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国朝鲜族农乐舞</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/piying1.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国皮影戏</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第五行-->
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/flower.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">花儿</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/Jingopera.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">京剧</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/humai.jpg" class="card-img-top" alt="..." width="200px" height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">蒙古族呼麦歌唱艺术</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第六行-->
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/lizu1.jpg" class="card-img-top" alt="..." width="200px" height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">黎族传统纺染织绣技艺</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/longquan.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">龙泉青瓷传统烧制技艺</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/nanjing.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">南京云锦织造技艺</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第七行-->
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/regong.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">热贡艺术</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/xuanzhi.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">宣纸传统制作技艺</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/mujiegou.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国传统木结构建筑营造技艺</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第八行-->
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/sangcan.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国传统桑蚕丝织技艺</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/diaobanyingshu.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国雕版印刷技艺</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/huoziyingshua.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国活字印刷术</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第九行-->
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/kamu.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">新疆维吾尔木卡姆艺术</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/mugongqiao.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国木拱桥传统营造技艺</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/shufa.jpg" class="card-img-top" alt="..." width="200px" height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国书法</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第十行-->
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/shuimigecang.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国水密隔舱福船制造技艺</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/zhuanke.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国篆刻</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/dongzu.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">侗族大歌</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第十一行-->
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/hezhezuyimakan.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">赫哲族伊玛堪</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/manasi.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">玛纳斯</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/duanwu1.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">端午节</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第十二行-->
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/muou.jpg" class="card-img-top" alt="..." width="200px" height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">福建木偶戏</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/maixirefu.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">麦西热甫</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/qiangnian1.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">羌年</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第十三行-->
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/twenty-four.png" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">二十四节气</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/songwangchuan.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">送王船</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/kunqu1.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">昆曲</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第十四行-->
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/zhussuan.png" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国珠算</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/zhenjiu.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国针灸</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/yaoyu.jpg" class="card-img-top" alt="..." width="200px" height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">藏医药浴法</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--2008年入选联合国文科组的中国非物质文化遗产-->
                <div class="tab-pane" id="one">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/kunqu1.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">昆曲</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/guqin2.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">古琴艺术</h5>
                                    <a href="third-page\guqin.html" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/kamu.jpg" class="card-img-top" alt="..." width="200px" height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">新疆维吾尔木卡姆艺术</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/changdiao.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">蒙古族长调民歌</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--2009年入选联合国文科组的中国非物质文化遗产-->
                <div class="tab-pane" id="two">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/zhuanke.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国篆刻</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/diaobanyingshu.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国雕版印刷技艺</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/shufa.jpg" class="card-img-top" alt="..." width="200px" height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国书法</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/jianzhi.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国剪纸</h5>
                                    <a href="third-page\jianzhi2.html" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/mujiegou.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国传统木结构建筑营造技艺</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/nanjing.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">南京云锦织造技艺</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/duanwu1.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">端午节</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/nongyuewu.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国朝鲜族农乐舞</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/mazu.jpg" class="card-img-top" alt="..." width="200px" height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">妈祖信俗</h5>
                                    <a href="third-page\mazu.html" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/humai.jpg" class="card-img-top" alt="..." width="200px" height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">蒙古族呼麦歌唱艺术</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/nanyin.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">南音</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/regong.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">热贡艺术</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/sangcan.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国传统桑蚕丝织技艺</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/longquan.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">龙泉青瓷传统烧制技艺</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/xuanzhi.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">宣纸传统制造技艺</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/guyue.jpg" class="card-img-top" alt="..." width="200px" height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">西安鼓乐</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/yueju.jpg" class="card-img-top" alt="..." width="200px" height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">粤剧</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/flower.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">花儿</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/manasi.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">马纳斯</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/gesasier.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">格萨斯尔</h5>
                                    <a href="third-page\gesaersi.html" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/dongzu.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">侗族大歌</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/zangxi.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">藏戏</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/qiangnian1.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">羌年</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/lizu1.jpg" class="card-img-top" alt="..." width="200px" height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">黎族传统纺染织绣技艺</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p></p>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/mugongqiao.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国木拱桥传统营造技艺</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--2010年入选联合国文科组的中国非物质文化遗产-->
                <div class="tab-pane" id="three">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/zhenjiu.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国针灸</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/Jingopera.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">京剧</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:210px;">
                                <img src="images/maixirefu.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">麦西热甫</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <P></P>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/shuimigecang.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国水密隔舱福船制造技艺</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/huoziyingshua.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国活字印刷术</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--2011年入选联合国文科组的中国非物质文化遗产-->
                <div class="tab-pane" id="four">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/hezhezuyimakan.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">赫哲族伊玛堪</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/piying1.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国皮影戏</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--2012年入选联合国文科组的中国非物质文化遗产-->
                <div class="tab-pane" id="five">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/muou.jpg" class="card-img-top" alt="..." width="200px" height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">福建木偶戏</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--2013年入选联合国文科组的中国非物质文化遗产-->
                <div class="tab-pane" id="six">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/zhussuan.png" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">中国珠算</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--2016年入选联合国文科组的中国非物质文化遗产-->
                <div class="tab-pane" id="seven">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/twenty-four.png" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">二十四节气</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--2018年入选联合国文科组的中国非物质文化遗产-->
                <div class="tab-pane" id="eight">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/yaoyu.jpg" class="card-img-top" alt="..." width="200px" height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">藏医药浴法</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--2020年入选联合国文科组的中国非物质文化遗产-->
                <div class="tab-pane" id="nine">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card" style="width: 300px; left:18px;left:10px">
                                <img src="images/taijiquan.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">太极拳</h5>
                                    <a href="third-page\TaiChi.html" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card" style="width: 300px;left:110px">
                                <img src="images/songwangchuan.jpg" class="card-img-top" alt="..." width="200px"
                                    height="180px">
                                <div class="card-body text-center">
                                    <h5 class="card-title">送王船</h5>
                                    <a href="#" class="btn btn-primary">了解详情...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 锚点的方式 -->
            <div class="back-top">
                <a href="#top">
                    <img src="images/top.gif" alt="" style="width: 60px; height: 80px;">
                </a>
            </div>

            <!--footer:创建网页的页脚-->
            <br><br><br>
            <hr>
            <footer id="footer" class="container " style="color: white; height: 60px;border-top: 1px solid #dddddd;width: 100%;background-color: rgb(179, 9, 9);">
                <div class="row p-1">
                    <div class="col text-right">
                        <div>
                            法律条款 隐私保护 联系我们 常见问题
                        </div>
                    </div>
                    
                </div>
                <div class="row p-1">
                    <div class="col text-center">
                        <div>
                            版权所有@NIIT
                        </div>
                    </div>
                </div>
            </footer>
        </div>

        <script>
            $("#back").click(function () {
                $("html,body").animate({ scrollTop: 0 }, 1000);
            });
        </script>
</body>

</html>